<template>
  <div  :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <div class="bottom-add">
      <a-input class="add-item" size="large" placeholder="请输入角色名" v-model="addRole.roleName"></a-input>
      <a-input class="add-item" size="large" placeholder="请输入描述" v-model="addRole.roleDescribe"></a-input>
      <a-button class="add-item" type="primary" size="large" @click="onAdd()">添加</a-button>
    </div>
    <a-table bordered :columns="columns" :data-source="datas" :loading="isloading" :rowKey="datas=>datas.roleId"
             :pagination="false">
      <span slot="roleName" slot-scope="record">
        <a-tag color="blue">
          {{ record }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="record">
        <a-space>
          <a-tooltip>
            <template slot="title">
            修改
            </template>
             <a-button type="primary" size="small" icon="tool"/>
        </a-tooltip>
       <a-tooltip>
            <template slot="title">
              删除
            </template>
           <a-button type="danger" size="small" icon="delete" @click="onDele(record)"/>
        </a-tooltip>

        </a-space>
    </span>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'role',
  data() {
    return {
      /**
       * 正在加载
       * */
      isloading: true,
      datas: [],
      addRole:{
        roleName:'',
        roleDescribe:''
      },
      columns: [
        {
          title: '角色ID',
          dataIndex: 'roleId',
          key: 'roleId',
          ellipsis: true,


        },
        {
          title: '角色名',
          dataIndex: 'roleName',
          key: 'roleName',
          scopedSlots: {customRender: 'roleName'}

        },
        {
          title: '角色描述',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: {customRender: 'action'}
        }
      ]
    }
  },
  mounted() {
    this.getRoleTable()
  },
  methods: {
    getRoleTable() {
      this.$axios({
        method: 'get',
        url: '/role/getRoleAll'
      }).then(res => {
        this.datas = res.data.data
        this.isloading = false
      })
    },
    onAdd(){
      this.$axios({
        method:'post',
        url:'/role/saveOrUpdateRole',
        data:{
          roleName:this.addRole.roleName,
          description:this.addRole.roleDescribe
        }
      }).then(res=>{
        if (res.data.code === "200") {
          this.$message.success('添加成功');
          this.getRoleTable()
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('添加失败');
        }
      })
    },
    onDele(record){
      this.$axios({
        method:'get',
        url:'/role/deleteRole?roleId='+record.roleId
      }).then(res=>{
        if (res.data.code === "200") {
          this.getRoleTable()
          this.$message.success('删除成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style scoped>
.bottom-add {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

.bottom-add .add-item {
  margin: 0 10px;
}
</style>
